<template>
	<div>
		<Modal  v-model="moveShow" title="签到" style="max-width: 500px;" @on-cancel="clickClose" show-cancel-button v-if="menuNum==2">
			<div class="restr">
				<div class="demo-input-suffix">
					<van-field v-model="signPhone" left-icon="phone-o" placeholder="请输入手机号" style="border-bottom: 1px solid #F1F1F1;" />
				</div>
			</div>
		</Modal >
		<Modal  v-model="moveShow" title="投票" style="max-width: 500px;" @on-cancel="proving" show-cancel-button v-if="menuNum==3">
			<div class="pad">
				<div class="fontTit">{{itemEntities.content}}（{{itemEntities.choiceType==0?'单':'多'}}选题）</div>
				<div class="radios" v-if="itemEntities.choiceType==0">
					<van-radio-group v-model="radio">
						<div style="margin-top: 20px;"  v-for="(item, i) in itemEntities.optionEntities" :key="i">
							<van-radio :name="item.id">{{item.content}}</van-radio>
						</div>
					</van-radio-group>
				</div>
				<div class="checkboxs" v-else>
					<van-checkbox-group v-model="checkedVote">
						<div style="margin-top: 20px;" v-for="(item, i) in itemEntities.optionEntities" :key="i">
							<van-checkbox :name="item.id">{{item.content}}</van-checkbox>
						</div>
					</van-checkbox-group>
				</div>
			</div>
		</Modal>
		<div class="invitation" v-if="menuNum==4" v-show="moveShow">
			<div style="width: 85%;position: relative;">
				<img src="../../../static/img/gb.png" class="invitationClose" @click="closeInvitation" alt="">
				<img :src="liveInfo.invitation" class="invitationImg" alt="">
			</div>
			<div>长按图片保存到本地</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				radio: "",
				checkedVote: [],
				itemEntities: {
					content: "",
					choiceType: "",
					optionEntities: []
				},
				timer: null,
				ids: "",
				signPhone: ""

			};
		},
		computed: {
			moveShow: {
				get: function() {
					return this.$store.state.moveShow
				},
				set: function() {}
			},
			menuNum() {
				return this.$store.state.menuNum
			},
			liveInfo() {
				return this.$store.state.liveInfo
			}
		},
		created() {
			// 定时签到
			var self = this
			setTimeout(() => {
				var ref = this.$store.state.liveInfo
				if (ref.signType == 2) {
					var maxtime = parseInt(ref.signTime) * 60;
					this.timer = setInterval(() => {
						if (maxtime >= 0) {
							maxtime--;
						} else {
							clearInterval(this.timer);
							this.$store.state.moveShow = true
							this.$store.state.liveImgShow = false
							this.$store.state.menuNum = 2
						}
					}, 1000)
				}
			}, 1000)
		},
		methods: {
			closeInvitation() {
				this.$store.state.moveShow = false
				this.$store.state.liveImgShow = true
			},
			// 签到
			clickClose(action, done) {
				if (action === "cancel") {
					this.$store.state.moveShow = false
					done();
					this.$store.state.liveImgShow = true
				} else {
					var openId=""
					if(sessionStorage.getItem("openid")){
						openId = sessionStorage.getItem("openid");
					}else{
						openId =localStorage.getItem("youkeId")
					}
					var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (!myreg.test(this.signPhone)) {
						this.$toast("请输入正确的手机号");
						done(false);
					} else {
						this.$store.state.signPhone = this.signPhone
						let data = new FormData();
						data.append("roomId", this.$route.params.id);
						data.append("openId", openId);
						data.append("phone", this.$store.state.signPhone);
						this.$http.post(this.$api.saveSign(), data).then(res => {
							if (res.data.code == 0) {
								this.$toast(res.data.msg)
							} else {
								this.$toast(res.data.msg)
							}
							this.$store.state.moveShow = false
							this.$store.state.liveImgShow = true
							done();
						});
					}
				}
			},
			getQuestionInfo() {
				// 投票人数/总人数x100%
				this.$http
					.get(this.$api.savepaperpaperId(this.$route.params.id))
					.then(res => {
						if (res.data.code == 0) {
							if (res.data.liveVotePaper.status == 1) {
								this.$store.state.moveShow = true;
								this.$store.state.liveImgShow = false
								this.itemEntities = res.data.liveVotePaper.itemEntities[0]
								this.ids = res.data.liveVotePaper.id
							} else if (res.data.liveVotePaper.status == 0) {
								this.$toast("投票未开始")
							}
						} else {
							this.$toast(res.data.msg)
						}
					});
			},
			// 投票
			proving(action, done) {
				if (action === "cancel") {
					this.$store.state.moveShow = false
					done();
					this.$store.state.liveImgShow = true
				} else {
					var param = ""
					var openId=""
					var nickname=""
					if(sessionStorage.getItem("openid")){
						openId = sessionStorage.getItem("openid");
						nickname = sessionStorage.getItem("nickname");
					}else{
						openId =localStorage.getItem("youkeId")
						nickname = localStorage.getItem("youkeName");
					}
					if (this.itemEntities.choiceType == 0) {
						param = this.radio
					} else {
						param = this.checkedVote.join(",")
					}
					this.voteVisible = false
					this.$http.post(this.$api.submitTest(), {
						openid: openId,
						uname: nickname,
						id: this.ids,
						itemEntities: [{
							extendParam: param
						}]
					}).then(res => {
						if (res.data.code == 0) {
							this.$toast("投票成功");
						} else if (res.data.code == 1105) {
							this.$toast("已经投过票了");
						}
						this.$store.state.moveShow = false
						done();
						this.$store.state.liveImgShow = true
					})
				}
			},
		}
	};
</script>
<style lang="less" rel=stylesheet/less scoped="scoped">
	.invitation {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		color: #ccc;
		background: rgba(0, 0, 0,
			0.9);

		.invitationImg {
			width: 100%;
		}

		.invitationClose {
			position: absolute;
			width: 30px;
			height: 30px;
			right: -10px;
			top: -10px;
		}
	}

	.radios,
	.checkboxs {
		label {
			display: block;
			margin-top: 15px;
		}
	}

	.pad {
		padding: 20px;
	}

	.fontTit {
		line-height: 25px;
		font-size: 15px;
		letter-spacing: 1px;
	}
</style>
